<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿购物车</title>
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/shopcar.css">
</head>
<body>
    <!-- 整个页面的容器 -->
    <div class="iot_whole_wrap">
        <div class="iot_top">
            <div class="iot_top_title">购物车</div>
        </div>
        <!-- 主体内容区域 -->
         <div class="iot_slogan">
            <div class="iot_slogan_left">满&nbsp;减</div>
            <div class="iot_slogan_right">满1件，即可享受9折优惠</div>
         </div>
        <div class="iot_main_body">
            <div class="iot_item">
                <div class="iot_item_left"><input type="radio"></div>
                <div class="iot_item_mid">
                    <img src="../images/baokuan2.png">
                </div>
                <div class="iot_item_right">
                    <div class="iot_r_top">&nbsp;&nbsp;麦瑞克智能磁控轻音椭圆机</div>
                    <div class="iot_r_mid">电磁控，黑色</div>
                    <div class="iot_r_buttom">
                        <div class="iot_price">￥135.00</div>
                        <div class="iot_select">
                            <div id="delete" class="iot_math">-</div>
                            <div id="count" class="iot_math">1</div>
                            <div id="add" class="iot_math">+</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="iot_buttom_fixed" style="position: fixed;top: 248px;">
            <div class="iot_one">
                <input type="radio" id="allselect">
            </div>
            <div class="iot_two">全选</div>
            <div class="iot_three">合计:</div>
            <div class="iot_four">￥135.00</div>
            <div class="iot_five">去结算</div>
        </div>
        <!-- 底部tab栏 -->
        <div class="iot_footer_tab">
            <div class="iot_footer_tab_item">
                <a href="index.html">
                <div class="iot_footer_tab_icon"><img src="../icons/index.svg"></div>
                <div class="iot_footer_tab_title">首页</div>
                </a>
            </div>
            <div class="iot_footer_tab_item">
                <a href="class.html">
                <div class="iot_footer_tab_icon"><img src="../icons/sort.svg"></div>
                <div class="iot_footer_tab_title">分类</div>
                </a>
            </div>
            <div class="iot_footer_tab_item">
                <a href="#">
                <div class="iot_footer_tab_icon"><img src="../icons/shopcar.svg"></div>
                <div class="iot_footer_tab_title" style="color: #27ba9b;">购物车</div>
                </a>
            </div>
            <div class="iot_footer_tab_item">
                <a href="my.html">
                <div class="iot_footer_tab_icon"><img src="../icons/wode.svg"></div>
                <div class="iot_footer_tab_title">我的</div>
                </a>
            </div>
        </div>
    </div>
    <script src="../js/test_api.js"></script>
    <script>
        var delete_key = document.querySelector("#delete")
        var count_key = document.querySelector("#count")
        var add_key = document.querySelector("#add")
        var item = document.querySelector(".iot_item")
        var price = document.querySelector(".iot_four")
        var gotoby = document.querySelector(".iot_five")
        let count = 0
        let total_price = 0
        delete_key.addEventListener('click',()=>{
            if(count>0){
                count--
                count_key.innerHTML = count
                price.innerHTML = "￥"+String(count*135)+".00"
            }else{
                item.style.display = 'none'
            }
        })
        add_key.addEventListener('click',()=>{
            count++
            count_key.innerHTML = count
            price.innerHTML = "￥"+String(count*135)+".00"
        })
        gotoby.addEventListener("click",()=>{
            window.location = 'payment.html'
        })
    </script>
</body>
</html>